<template>
  <div class="content">
    <div class="container">
      <div class="header">
        <h1>聊天室</h1>
        <p>连接世界，畅聊无限</p>
      </div>

      <div class="card">
        <!-- 步骤指示器 -->
        <div class="step-indicator" id="step-indicator">
          <div class="step active" id="step1">
            <div class="step-circle">1</div>
            <div class="step-text">验证手机号</div>
          </div>
          <div class="step" id="step2">
            <div class="step-circle">2</div>
            <div class="step-text">填写账号信息</div>
          </div>
          <div class="step" id="step3">
            <div class="step-circle">3</div>
            <div class="step-text">注册成功</div>
          </div>
        </div>

        <!-- 第一步：验证手机号 -->
        <div id="step1-content" class="card-body">
          <div class="form-group">
            <label for="country">国家/地区</label>
            <select id="country" class="country-select">
              <option value="86">中国 (+86)</option>
              <option value="1">美国 (+1)</option>
              <option value="44">英国 (+44)</option>
              <option value="81">日本 (+81)</option>
              <option value="82">韩国 (+82)</option>
            </select>
          </div>

          <div class="form-group">
            <label for="phone">手机号</label>
            <div class="input-with-icon">
              <i class="fas fa-mobile-alt input-icon"></i>
              <input type="tel" id="phone" placeholder="建议使用常用手机号" />
            </div>
            <div class="error-message" id="phone-error"></div>
          </div>

          <div class="form-group">
            <label for="captcha">验证码</label>
            <div class="captcha-container">
              <img id="captcha-image" :src="`/api/user/getcode?${timestamp}`" alt="验证码"
                style="height: 50px; cursor: pointer" @click="refreshCaptcha" />
              <div class="input-with-icon" style="flex: 2">
                <i class="fas fa-shield-alt input-icon"></i>
                <input type="text" id="captcha" placeholder="输入验证码" />
              </div>
            </div>
            <div class="error-message" id="captcha-error"></div>
          </div>

          <div class="agreement">
            <input type="checkbox" id="agreement" checked />
            <label for="agreement">我已阅读并同意<a href="#">《用户服务协议》</a>和<a href="#">《隐私政策》</a></label>
          </div>

          <button class="btn" id="verify-btn" @click="handleVerifyPhone">
            验证手机号
          </button>

          <div class="login-link">
            已有账号？<a href="#" @click.prevent="updateState('login')">立即登录</a>
          </div>
        </div>

        <!-- 第二步：填写账号信息 -->
        <div id="step2-content" class="card-body hidden">
          <div class="form-group">
            <label>用户头像</label>
            <div class="avatar-preview" id="avatar-preview" @click="triggerAvatarUpload">
              <i class="fas fa-user"></i>
              <img id="avatar-img" src="#" alt="头像预览" />
            </div>
            <input type="file" id="avatar" accept="image/*" class="hidden" @change="handleAvatarUpload" />
          </div>

          <div class="form-group">
            <label for="username">用户名</label>
            <div class="input-with-icon">
              <i class="fas fa-user input-icon"></i>
              <input type="text" id="username" placeholder="设置您的用户名" />
            </div>
            <div class="error-message" id="username-error"></div>
          </div>

          <div class="form-group">
            <label for="password">设置密码</label>
            <div class="input-with-icon">
              <i class="fas fa-lock input-icon"></i>
              <input type="password" id="password" placeholder="设置登录密码" @input="checkPasswordStrength" />
            </div>
            <div class="password-strength">
              <div class="password-strength-bar" id="password-strength-bar"></div>
            </div>
            <div class="error-message" id="password-error"></div>
          </div>

          <div class="form-group">
            <label for="confirm-password">确认密码</label>
            <div class="input-with-icon">
              <i class="fas fa-lock input-icon"></i>
              <input type="password" id="confirm-password" placeholder="再次输入密码" />
            </div>
            <div class="error-message" id="confirm-password-error"></div>
          </div>

          <button class="btn" id="register-btn" @click="handleRegister">
            完成注册
          </button>

          <div class="login-link">
            已有账号？<a href="#" @click.prevent="updateState('login')">立即登录</a>
          </div>
        </div>

        <!-- 第三步：注册成功 -->
        <div id="step3-content" class="card-body hidden">
          <div class="success-message">
            <div class="success-icon">
              <i class="fas fa-check-circle"></i>
            </div>
            <h2>注册成功！</h2>
            <p>恭喜您已成功注册聊天室账号</p>
            <p>请登录后开始使用聊天室</p>
            <button class="btn" id="to-login" @click="updateState('login')">
              去登录
            </button>
          </div>
        </div>

        <!-- 登录页面 -->
        <div id="login-content" class="card-body hidden">
          <div class="success-notice" id="register-success-notice">
            <i class="fas fa-check-circle"></i> 注册成功！请使用您的账号登录
          </div>

          <div class="form-group">
            <label for="login-phone">手机号</label>
            <div class="input-with-icon">
              <i class="fas fa-mobile-alt input-icon"></i>
              <input type="tel" id="login-phone" placeholder="请输入您的手机号" />
            </div>
            <div class="error-message" id="login-phone-error"></div>
          </div>

          <div class="form-group">
            <label for="login-password">密码</label>
            <div class="input-with-icon">
              <i class="fas fa-lock input-icon"></i>
              <input type="password" id="login-password" placeholder="请输入密码" />
            </div>
            <div class="error-message" id="login-password-error"></div>
          </div>

          <div class="forgot-password">
            <a href="#" @click.prevent="showForgotPassword">忘记密码？</a>
          </div>

          <div class="form-group">
            <label for="login-captcha">验证码</label>
            <div class="captcha-container">
              <img id="login-captcha-image" :src="`/api/user/getcode?${loginTimestamp}`" alt="验证码"
                style="height: 50px; cursor: pointer" @click="refreshLoginCaptcha" />
              <div class="input-with-icon" style="flex: 2">
                <i class="fas fa-shield-alt input-icon"></i>
                <input type="text" id="login-captcha" placeholder="输入验证码" />
              </div>
            </div>
            <div class="error-message" id="login-captcha-error"></div>
          </div>

          <button class="btn" id="login-btn" @click="handleLogin">登录</button>

          <div class="login-link">
            没有账号？<a href="#" @click.prevent="updateState('step1')">立即注册</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import axios from "axios"
import { useRouter } from "vue-router"
import { parseToken } from '../utils/jwt'  // 使用已有的jwt工具函数

const router = useRouter()

// 验证码时间戳（修复路径及刷新问题）
const timestamp = ref(new Date().getTime())
const loginTimestamp = ref(new Date().getTime())

const states = {
  STEP1: "step1",
  STEP2: "step2",
  STEP3: "step3",
  LOGIN: "login"
}
let currentState = states.STEP1
let registeredPhone = ""

const api = axios.create({
  baseURL: '/api',  // 修改为使用代理
  timeout: 10000,
  headers: {
    "Content-Type": "application/json"
  }
})

const loadingIndicator = document.createElement("div")
loadingIndicator.className = "loading-indicator"
loadingIndicator.style.cssText = `
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  display: none;
`
loadingIndicator.innerHTML = `
  <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
`
document.body.appendChild(loadingIndicator)

const showLoading = () => {
  loadingIndicator.style.display = "flex"
}
const hideLoading = () => {
  loadingIndicator.style.display = "none"
}

const showError = (elementId, message) => {
  const el = document.getElementById(elementId)
  if (el) {
    el.textContent = message
    el.style.display = "block"
  }
}

const hideError = (elementId) => {
  const el = document.getElementById(elementId)
  if (el) el.style.display = "none"
}

const updateState = (newState) => {
  currentState = newState

  document.getElementById("step1-content").classList.add("hidden")
  document.getElementById("step2-content").classList.add("hidden")
  document.getElementById("step3-content").classList.add("hidden")
  document.getElementById("login-content").classList.add("hidden")
  document.getElementById("register-success-notice").style.display = "none"

  if (newState === states.STEP1) {
    document.getElementById("step1-content").classList.remove("hidden")
    document.getElementById("step-indicator").style.display = "flex"
    refreshCaptcha()
  } else if (newState === states.STEP2) {
    document.getElementById("step2-content").classList.remove("hidden")
    document.getElementById("step-indicator").style.display = "flex"
  } else if (newState === states.STEP3) {
    document.getElementById("step3-content").classList.remove("hidden")
    document.getElementById("step-indicator").style.display = "flex"
  } else if (newState === states.LOGIN) {
    document.getElementById("login-content").classList.remove("hidden")
    document.getElementById("step-indicator").style.display = "none"
    refreshLoginCaptcha()
    if (registeredPhone) {
      document.getElementById("login-phone").value = registeredPhone
      document.getElementById("register-success-notice").style.display = "block"
    }
  }

  Object.values(states).forEach((state) => {
    const stepEl = document.getElementById(state)
    if (stepEl) {
      stepEl.classList.remove("active", "completed")
      if (state === newState) stepEl.classList.add("active")
      if (["step2", "step3"].includes(newState) && state === "step1")
        stepEl.classList.add("completed")
      if (newState === "step3" && state === "step2")
        stepEl.classList.add("completed")
    }
  })
}

// 验证码刷新（修复路径逻辑）
const refreshCaptcha = () => {
  timestamp.value = new Date().getTime()
}

const refreshLoginCaptcha = () => {
  loginTimestamp.value = new Date().getTime()
}

const validatePhone = (phone) => /^1[3-9]\d{9}$/.test(phone)
const validateUsername = (username) =>
  username.length >= 3 && username.length <= 20
const validatePassword = (password) => password.length >= 6

const handleVerifyPhone = async () => {
  const phone = document.getElementById("phone").value
  const captcha = document.getElementById("captcha").value
  const agreement = document.getElementById("agreement").checked

  hideError("phone-error")
  hideError("captcha-error")
  let isValid = true

  if (!validatePhone(phone)) {
    showError("phone-error", "请输入有效的手机号码")
    isValid = false
  }
  if (!agreement) {
    alert("请阅读并同意用户服务协议和隐私政策")
    return
  }

  if (!isValid) return

  try {
    console.log('开始验证验证码')
    const response = await api.get('/user/checkcode', {
      params: {
        code: captcha
      }
    })

    console.log('验证码验证结果:', response.data)

    if (response.data.code === 'SUCCESS' && response.data.data === true) {
      console.log('验证成功，准备跳转到下一步')
      localStorage.setItem('tempPhone', phone)
      updateState(states.STEP2)
    } else {
      console.log('验证失败:', response.data)
      showError("captcha-error", "验证码错误")
      refreshCaptcha()
    }
  } catch (error) {
    console.error('验证码验证失败:', error)
    showError("captcha-error", "验证码验证失败，请重试")
    refreshCaptcha()
  }
}
const checkPasswordStrength = () => {
  const password = document.getElementById("password").value
  const bar = document.getElementById("password-strength-bar")
  let strength = 0

  if (password.length >= 6) strength += 25
  if (password.match(/[a-z]/)) strength += 25
  if (password.match(/[A-Z]/)) strength += 25
  if (password.match(/[0-9]/)) strength += 25

  bar.style.width = `${strength}%`

  if (strength <= 25) bar.style.background = "#e53935"
  else if (strength <= 50) bar.style.background = "#ff9800"
  else if (strength <= 75) bar.style.background = "#fdd835"
  else bar.style.background = "#4caf50"
}

const triggerAvatarUpload = () => {
  document.getElementById("avatar").click()
}

const handleAvatarUpload = async (e) => {
  if (!e.target.files?.[0]) return
  const file = e.target.files[0]

  if (!file.type.startsWith("image/")) {
    alert("请选择图片文件")
    return
  }

  try {
    const compressedDataUrl = await compressImage(file)
    const img = document.getElementById("avatar-img")
    img.src = compressedDataUrl
    img.style.display = "block"
    document.querySelector(".avatar-preview i").style.display = "none"
  } catch (error) {
    alert("图片处理失败，请重试")
  }
}

const compressImage = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = (e) => {
      const img = new Image()
      img.src = e.target.result
      img.onload = () => {
        const canvas = document.createElement("canvas")
        let width = img.width
        let height = img.height
        const maxSize = 150 // Reduced from 200 to 150

        if (width > height && width > maxSize) {
          height = Math.round((height * maxSize) / width)
          width = maxSize
        } else if (height > maxSize) {
          width = Math.round((width * maxSize) / height)
          height = maxSize
        }

        canvas.width = width
        canvas.height = height
        const ctx = canvas.getContext("2d")
        ctx.fillStyle = '#FFFFFF' // Add white background
        ctx.fillRect(0, 0, width, height)
        ctx.drawImage(img, 0, 0, width, height)
        resolve(canvas.toDataURL("image/jpeg", 0.4)) // Reduced quality from 0.6 to 0.4
      }
      img.onerror = () => reject(new Error("图片加载失败"))
    }
    reader.onerror = () => reject(new Error("文件读取失败"))
  })
}

const handleRegister = async () => {
  const username = document.getElementById("username").value
  const password = document.getElementById("password").value
  const confirmPassword = document.getElementById("confirm-password").value
  const phone = localStorage.getItem("tempPhone")
  const avatarImg = document.getElementById("avatar-img")

  hideError("username-error")
  hideError("password-error")
  hideError("confirm-password-error")
  let isValid = true

  if (!validateUsername(username)) {
    showError("username-error", "用户名长度应在3-20个字符之间")
    isValid = false
  }
  if (!validatePassword(password)) {
    showError("password-error", "密码长度至少为6个字符")
    isValid = false
  }
  if (password !== confirmPassword) {
    showError("confirm-password-error", "两次输入的密码不一致")
    isValid = false
  }

  if (!isValid) return

  try {
    showLoading()
    const registerData = {
      userName: username,
      password: password,
      telephone: phone,
      avatarUrl: avatarImg.src !== "#" ? avatarImg.src : null
    }

    const res = await api.post("/user/register", registerData)

    if (res.data.code === "SUCCESS") {
      registeredPhone = phone
      localStorage.setItem("registeredPhone", phone)
      localStorage.removeItem("tempPhone")
      updateState(states.STEP3)
    } else {
      alert("注册失败，请重试")
    }
  } catch (error) {
    const errMsg = error.response?.data?.errMsg || "注册失败，请重试"
    alert(`注册失败: ${errMsg}`)
  } finally {
    hideLoading()
  }
}

const showForgotPassword = () => {
  alert("请联系管理员重置密码")
}

const handleLogin = async () => {
  const loginPhone = document.getElementById("login-phone").value
  const loginPassword = document.getElementById("login-password").value
  const loginCaptcha = document.getElementById("login-captcha").value.trim()
  hideError("login-phone-error")
  hideError("login-password-error")
  hideError("login-captcha-error")
  let isValid = true

  if (!validatePhone(loginPhone)) {
    showError("login-phone-error", "请输入有效的手机号码")
    isValid = false
  }
  if (!validatePassword(loginPassword)) {
    showError("login-password-error", "密码长度至少为6个字符")
    isValid = false
  }
  if (!isValid) return

  try {
    showLoading()
    // 验证验证码
    const captchaRes = await api.get("/user/checkcode", {
      params: { code: loginCaptcha }
    })
    if (!(captchaRes.data.code === "SUCCESS" && captchaRes.data.data === true)) {
      showError("login-captcha-error", "验证码错误")
      refreshLoginCaptcha()
      return
    }

    // 执行登录
    const loginData = {
      telephone: loginPhone,
      password: loginPassword
    }
    const loginRes = await api.post("/user/login", loginData)

    if (loginRes.data.code === "SUCCESS") {
      const { token, id } = loginRes.data.data
      // 存储token和用户ID
      localStorage.setItem("token", token)
      localStorage.setItem("userId", id)

      // 解析token并初始化用户信息
      let userInfo = {}
      try {
        userInfo = parseToken(token)
        console.log('Token解析结果:', userInfo)
      } catch (error) {
        console.error('Token解析失败:', error)
        userInfo = { id, userName: loginPhone } // 回退使用手机号作为用户名
      }

      // 1. 先存储基础用户信息（不含头像）
      localStorage.setItem("user_info", JSON.stringify({
        ...userInfo,
        avatarUrl: "/images/avatar-loading.png" // 临时占位图
      }))

      // 2. 立即获取并缓存头像
      try {
        const avatarRes = await api.get("/user/getavatarUrl", {
          params: { userId: id }
        })
        
        if (avatarRes.data.code === "SUCCESS" && avatarRes.data.data) {
          const avatarData = avatarRes.data.data // 获取Base64头像数据
          console.log('头像获取成功，长度:', avatarData.length)

          // 更新用户信息，添加头像
          const updatedUserInfo = {
            avatarUrl: avatarData, // 直接使用Base64作为URL     
          }
          localStorage.setItem("user_info", JSON.stringify(updatedUserInfo))
        } else {
          console.warn('头像获取成功但数据为空，使用默认头像')
        }
      } catch (error) {
        console.error('获取头像失败:', error)
        // 失败时仍保留临时占位图，不阻断登录流程
      }

      // 3. 强制跳转并刷新路由
      router.push("/").then(() => {
        window.location.reload() // 确保新页面能读取到最新缓存
      }).catch(err => {
        console.error("路由跳转失败:", err)
      })
    } else {
      alert("登录失败，请检查账号信息")
    }
  } catch (error) {
    const errMsg = error.response?.data?.errMsg || "登录失败，请重试"
    alert(`登录失败: ${errMsg}`)
  } finally {
    hideLoading()
  }
}

onMounted(() => {
  const savedPhone = localStorage.getItem("registeredPhone")
  if (savedPhone) {
    registeredPhone = savedPhone
    updateState(states.LOGIN)
  } else {
    updateState(states.STEP1)
  }

  document
    .getElementById("password")
    ?.addEventListener("input", checkPasswordStrength)
})
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}


.content {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.container {
  width: 100%;
  max-width: 500px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  color: white;
}

.header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.card {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
}

.card-header {
  background: #1a73e8;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.card-body {
  padding: 30px;
}

.form-group {
  margin-bottom: 25px;
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

.input-with-icon {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #777;
}

input,
select {
  width: 100%;
  padding: 15px 15px 15px 45px;
  border: 2px solid #ddd;
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.3s;
}

input:focus,
select:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
  outline: none;
}

.country-select {
  padding-left: 15px;
}

.captcha-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.captcha-box {
  flex: 1;
  background: #f1f1f1;
  height: 50px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 5px;
  color: #333;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s;
}

.captcha-box:hover {
  background: #e0e0e0;
  transform: scale(1.02);
}

.btn {
  width: 100%;
  padding: 15px;
  background: #1a73e8;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn:hover {
  background: #0d62da;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(26, 115, 232, 0.4);
}

.btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.agreement {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  font-size: 0.95rem;
  color: #555;
}

.agreement input {
  width: auto;
  margin-right: 10px;
}

.agreement a {
  color: #1a73e8;
  text-decoration: none;
}

.agreement a:hover {
  text-decoration: underline;
}

.step-indicator {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  gap: 30px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #888;
  border: 2px solid #ccc;
  transition: all 0.3s;
}

.step.active .step-circle {
  background: #1a73e8;
  color: white;
  border-color: #1a73e8;
  transform: scale(1.1);
}

.step.completed .step-circle {
  background: #4caf50;
  color: white;
  border-color: #4caf50;
}

.step-text {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

.step.active .step-text {
  color: #1a73e8;
  font-weight: bold;
}

.success-message {
  text-align: center;
  padding: 30px;
}

.success-icon {
  font-size: 5rem;
  color: #4caf50;
  margin-bottom: 20px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.success-message h2 {
  margin-bottom: 15px;
  color: #333;
}

.success-message p {
  margin-bottom: 25px;
  color: #555;
  font-size: 1.1rem;
}

.login-link {
  text-align: center;
  margin-top: 20px;
  color: #555;
  font-size: 1rem;
}

.login-link a {
  color: #1a73e8;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.2s;
}

.login-link a:hover {
  text-decoration: underline;
  color: #0d62da;
}

.avatar-preview {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f1f1f1;
  margin: 0 auto 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 2px solid #ddd;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

.avatar-preview:hover {
  border-color: #1a73e8;
  transform: scale(1.05);
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.avatar-preview i {
  font-size: 2.5rem;
  color: #777;
}

.hidden {
  display: none;
}

.error-message {
  color: #e53935;
  font-size: 0.9rem;
  margin-top: 5px;
  display: none;
}

.password-strength {
  height: 5px;
  background: #e0e0e0;
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}

.password-strength-bar {
  height: 100%;
  width: 0;
  background: #e53935;
  transition: width 0.3s;
}

.forgot-password {
  text-align: right;
  margin-top: -15px;
  margin-bottom: 20px;
}

.forgot-password a {
  color: #1a73e8;
  text-decoration: none;
  font-size: 0.9rem;
}

.forgot-password a:hover {
  text-decoration: underline;
}

.success-notice {
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
  padding: 10px 15px;
  margin-bottom: 20px;
  border-radius: 4px;
  color: #2e7d32;
  display: none;
}

@media (max-width: 600px) {
  .card-body {
    padding: 20px;
  }

  .header h1 {
    font-size: 2rem;
  }

  .step-indicator {
    gap: 15px;
  }
}
</style>
